@layout("/common/container.html", {"title" : "角色", "plugin": "jstree"}){
<style>
    .jstree .permissions-icon,
    .jstree .e-svg-icon{
        display: inline-block;
        width: 18px;
        height: 24px;
        line-height: 26px;
        margin-right: 5px;
        text-align: center;
        vertical-align: top;
        color: #c1bfd0;
    }
    .jstree .e-svg-icon g [fill]{
        fill: #c1bfd0;
    }

    .jstree .permissions-icon.la {
        font-size: 1.5rem;
    }
</style>
<div class="card">
    <#card:head title="角色" icon="la la-users"/>
    <div class="card-body">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-12 border-right">
                <form class="e-form e-padding-b-15">
                    <div class="input-group">
                        <input type="text" id="role-title" class="form-control" placeholder="请输入关键字">
                        <div class="input-group-append">
                            <button id="search-role-btn" class="btn btn-secondary" type="button">搜索</button>
                        </div>
                    </div>
                </form>
                <div class="e-scrollable" data-scrollable="true">
                    <div id="roles-tree"></div>
                </div>

                <div id="search-role" class="e-hide">
                    <div class="tree"></div>
                    <button type="button" class="btn btn-metal btn-xs back-btn e-margin-t-5"><i
                            class="la la-undo"></i> 返回
                    </button>
                </div>
            </div>
            <div class="col-lg-9 col-md-8 col-12" id="role-info">

            </div>
        </div>
    </div>
</div>
<!--begin::页面脚本 -->
<#script src="static/modular/sys/role/view.js" />
<!--end::页面脚本 -->
@}